<template>
    <div id="big">
        <el-container>
            <!--    头部-->
            <el-header style="height: 30px">
                <div id="he">
                    <div v-if="sele">
                        <span style="color: darkgray"> |</span>&nbsp;&nbsp;&nbsp;
                        <el-link type="primary" @click="login">登录</el-link>&nbsp;&nbsp;&nbsp;
                        <el-link type="success" @click="signin">注册</el-link>
                    </div>

                    <div v-if="!sele">
                        <el-link type="info" v-show="member.type===0" @click="recruitTeacher">讲师招募</el-link>&nbsp;&nbsp;&nbsp;
                        <el-link type="info" @click="$router.push({name:'teacherCenter'})" v-show="member.type===1">
                            讲师中心
                        </el-link>&nbsp;&nbsp;&nbsp;
                        <span style="color: darkgray"> |</span>&nbsp;&nbsp;&nbsp;
                        <span style="color: gray" v-if="member">{{member.nickname}}</span>&nbsp;&nbsp;&nbsp;
                        <span style="color: darkgray"> |</span>&nbsp;&nbsp;&nbsp;
                        <el-link type="info" @click="toOrder">我的订单</el-link>&nbsp;&nbsp;&nbsp;
                        <el-link type="info" @click="logout">退出</el-link>&nbsp;&nbsp;&nbsp;
                    </div>
                </div>
            </el-header>

            <!--    导航栏-->
            <el-main>
                <div id="top">
                    <div id="top_img">
                        <img src="http://static.roncoos.com/os/10.png">
                    </div>
                    <div id="tou_div_ul">
                        <ul id="tou_ul">
                            <li v-for="(item) in tou_dates">
                                  <router-link :to="item.href" v-if="item.headImgUrl=='新窗口跳转'" target="_blank">{{item.headName}}</router-link>
                                  <router-link :to="item.href" v-else target="">{{item.headName}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-main>
            <el-main>
                <!--      页面跳转-->
                <router-view></router-view>
            </el-main>
            <el-footer>
                <div class="i_footer">
                    <div class="footer_content clearfix">
                        <div class="footer_msg" v-for="item in bettom_dates">
                            <ul>
                                <li>{{item.articleContent}}</li>
                                <li class="m_row"></li>
                                <li class="m_header" v-for="items in item.children"><el-link :underline="false" @click="guanyu(items.articleId)">{{items.articleContent}}</el-link></li>
                            </ul>
                        </div>
                        <div class="m_right">
                            <div class="footer_msg">
                                <ul>
                                    <li class="m_header">官方微信</li>
                                    <li>
                                        <img src="http://static.roncoos.com/os/001.jpg" alt="">
                                    </li>
                                </ul>
                            </div>
                            <div class="footer_msg">
                                <ul>
                                    <li class="m_header">官方微博</li>
                                    <li>
                                        <img src="http://static.roncoos.com/os/001.jpg" alt="">
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="friend_link">
                        <ul class="clearfix">
                            <li class="link_one">友情链接:</li>
                            <li v-for="item in link">
                              <router-link :to="item.linkUrl" v-if="item.linkTarget=='新窗口跳转'" target="_blank">{{item.linkName}}</router-link>
                              <router-link :to="item.linkUrl" v-else target="">{{item.linkName}}</router-link>
                            </li>
                        </ul>
                    </div>
                    <div class="copyright" v-if="service">
                        <span v-html="service.copyright"></span>
                    </div>
                    <div class="icp_num">
                        <a href="http://www.doityun.com/" target="_blank" class="lingke_link">IT云提供计算服务</a>
                        <span>&nbsp;|&nbsp;</span>
                        <a href="http://www.miitbeian.gov.cn/" target="_blank" class="lingke_link">IT云提供计算服务</a>
                        <span>&nbsp;|&nbsp;</span>
                        <a :href="'http://www.beian.gov.cn/portal/index'" target="_blank" class="lingke_link"><img
                                src="http://static.roncoos.com/os/001.jpg" class="prn_icon" alt="">&nbsp;IT云提供计算服务</a>
                    </div>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script>

    export default {
        name: "home",
        //头部的状态等
        data() {
            return {
                tou_dates: [],
                //底部信息
                bettom_dates: [],
                service: '',
                sele: true,
                //友情链接
                link: [],

                //登陆人信息
                member: [],
            }
        },
        methods: {

          guanyu(item){
            this.$router.push({
              path:'/guanyu',
              query:{
                key:item
              }
            })
          },
            item() {
                //查询top信息
                var that = this;
                this.$http.get("/home/head-nav/web/getAllHeadNav").then(function (resp) {
                    that.tou_dates = resp.data.result
                })
                //查询底部信息
                this.$http.get("/home/article/web/getAllartic").then(function (resp) {
                    that.bettom_dates = resp.data.result;
                })
                //查询底部链接
                this.$http.get("/home/link/web/getAllLink").then(function (resp) {
                    that.link = resp.data.result;
                })
            },
            //登录按钮
            login() {
                this.$router.push({
                    path: '/login',
                    query: {
                        key: 0
                    }
                })
            },
            //注册按钮
            signin() {
                this.$router.push({
                    path: '/login',
                    query: {
                        key: 1
                    }
                })
            },
            recruitTeacher() {
                this.$router.push({name: 'Re-teacher'})
            },
            logout() {
                var that = this;
                var token = sessionStorage.getItem("token")
                this.$http.get(`/sso/logout/${token}`).then(function (success) {
                    if (success.data.code === 200) {
                        that.$message.success(success.data.msg)
                        sessionStorage.removeItem("token")
                        that.sele = !that.sele
                        that.$router.push('/index')
                    }
                })
            },
            logintest() {
                var that = this;
                var token = sessionStorage.getItem("token");
                if (token) {
                    that.sele = false;
                }
            },
            toOrder() {
                this.$router.push("/order")
            },
            loginStatus() {
                var that = this;
                var token = sessionStorage.getItem("token");
                if (token) {
                    this.$http.get(`/member/findMemberByToken/${token}`).then(function (success) {
                        that.member = success.data.result;
                    })
                }
            }

        },
        created() {
            this.logintest()
            this.loginStatus();
            this.item();
        }
    }
</script>

<style scoped>

    /*-------------------------------一层---------------------------------*/
    /*最上层操作*/
    .el-header {
        background: #333;
    }

    /*登录和注册*/
    #he {
        float: right;
        margin-right: 12%;
        margin-top: 5px;
        font-size: 11px;
    }


    /*------------------------------------------二层--------------------------------*/
    /*导航栏操作*/
    #top {
        height: 80px;
        text-align: center;
        margin-left: 12%;
        margin-right: 12%;
    }

    /*导航栏下的所有div操作*/
    #top > div {
        float: left;
    }

    /*导航栏下的ul下的li*/
    #tou_ul > li {
        float: left;
        margin-left: 40px;
    }

    /*导航栏下的ul父类div*/
    #tou_div_ul {
        padding-top: 20px;
        display: inline;
        height: 50px;
        width: 80%;
    }

    #top_img {
        width: 20%;
        text-align: left;
        padding-top: 10px;
    }

    #top_img > img {
        width: 240px;
        height: 60px;
    }

    /*导航栏下的ul列表*/
    #tou_ul {
        list-style: none;
    }

    #tou_div_ul > ul {
        display: inline;
        height: 50px;
    }

    /*导航栏下的ul列表下的所有li*/
    #tou_ul > li {
        font-size: 20px;
    }

    a {
        text-decoration: none
    }


</style>

<style lang="scss" rel="stylesheet/scss">
    .i_footer {
        background: rgb(51, 51, 51);
        padding-top: 60px;

        .footer_content {
            width: 1200px;
            margin: 0 auto;
            padding-bottom: 30px;
            border-bottom: 1px solid rgb(102, 102, 102);
        }

        .footer_msg {
            float: left;
            width: 160px;

            img {
                width: 96px;
                height: 96px;
            }

            li {
                color: #ccc;
                font-size: 14px;
                margin-bottom: 20px;

                a {
                    color: #ccc;

                    &:hover {
                        text-decoration: none;
                        color: #fff;
                    }
                }

                &.m_header {
                    color: #fff;
                    font-size: 18px;
                }

                &.m_row {
                    width: 18px;
                    height: 3px;
                    background: #ccc;
                    margin-bottom: 25px;
                }
            }
        }

        .m_right {
            float: right;

            .big_phone {
                color: #fff;
                font-size: 18px;
                margin-left: 56px;
            }

            .small_phone {
                color: #fff;
                font-size: 14px;
                margin-top: 5px;
                margin-left: 56px;
            }
        }

        .m_phone {
            position: relative;

            img {
                width: 46px;
                height: 43px;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .qq_btn {
            margin-top: 10px;
            position: relative;

            img {
                width: 11px;
                height: 13px;
                position: absolute;
                top: 12px;
                left: 25px;
            }

            a {
                display: block;
                width: 113px;
                height: 36px;
                padding-left: 15px;
                background: rgb(213, 20, 35);
                line-height: 36px;
                color: #fff;
                border-radius: 5px;
                text-align: center;

                &:hover {
                    text-decoration: none;
                    color: #fff;
                }
            }
        }

        .m_test {
            width: 262px;
            height: 30px;
            line-height: 30px;
            // background: rgb(34, 34, 34);
            color: #ccc;
            font-size: 14px;
            padding-left: 10px;
            margin-top: 8px;

            img {
                width: 19px;
                height: 14px;
                position: relative;
                top: 2px;
            }
        }

        .friend_link {
            width: 1200px;
            margin: 25px auto 0px;

            li {
                float: left;
                font-size: 14px;

                &.link_one {
                    color: #fff;
                    margin-right: 20px;
                }

                a {
                    color: #ccc;
                    margin: 0px 10px;

                    &:hover {
                        color: #fff;
                        text-decoration: none;
                    }
                }
            }
        }

        .copyright {
            background: rgb(102, 102, 102);
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #ccc;
            margin-top: 25px;

            a {
                color: #ccc;
            }
        }

        .icp_num {
            line-height: 30px;
            text-align: center;
            color: #ccc;

            .lingke_link {
                color: #ccc;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        .prn_icon {
            width: 16px;
            height: 16px;
            position: relative;
            top: 3px;
        }
    }
</style>